import { useNavigate } from "react-router-dom";

// 列表数据
const listData = [
  {
    id: 1,
    name: "Task-AAAAAAAA",
  },
  {
    id: 2,
    name: "Task-BBBBBBBB",
  },
  {
    id: 3,
    name: "Task-BBBBBBBB",
  },
  {
    id: 4,
    name: "Task-BBBBBBBB",
  },
  {
    id: 5,
    name: "Task-BBBBBBBB",
  },
  {
    id: 6,
    name: "Task-BBBBBBBB",
  },
];
import "./index.scss";

const Market = () => {
  const navigate = useNavigate();

  function handleClick(url: string) {
    navigate(url);
  }

  return (
    <div className="market-container">
      {/* 轮播图 */}
      <div className="market-banner">
        <img src="/images/market_banner.jpg" />
      </div>
      {/* <div className="market-tab">
        <span className="name">NFT</span>
      </div> */}
      <div className="market-list-box">
        <ul className="market-list">
          {listData.map((item) => (
            <li key={item.id} className="item">
              <div className="item-box">
                <div className="card-box">
                  <div className="level">
                    <span>Common 80%</span>
                  </div>
                  <img src="/images/card.png" alt="" />
                </div>
                <div className="user-info">
                  <div className="user-photo">
                    <img src="/images/user.jpg" alt="" />
                  </div>
                  <span className="name">Elon Musk</span>
                </div>
                <div className="title">Understand Wang's persistence</div>
                <div className="bottom-price">
                  <div className="price-box">
                    <img src="/images/usdt.png" alt="" />
                    <span className="num">231,121</span>
                  </div>
                </div>
                <div className="buy-box">
                  <button
                    className="btn"
                    onClick={() => {
                      handleClick("/market/detail");
                    }}
                  >
                    BUY
                  </button>
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};
export default Market;
